<template>
	<div class="public_background po-re">
		<div class="public_title over-h">
			<img class="fl" src="~@/assets/img/index_bg_txt.png" alt="中共郑州市公安局交警巡逻警察智慧党建平台">
			<div class="fr h-50 mr-10">	
				<router-link :to="{path: `/personalCenter`}">
					<img src="~@/assets/img/headerImg.png" alt="">
					<span class="user">{{user}}</span>
				</router-link>	
			</div>
		</div>
		<!-- 导航页 -->
		<ul class="public_header_nav_horizontal">
			<li v-for="(item,index) in navList" @click="addClassHandle(index)" :class="{ 'active':index==current}">
				<router-link :to="{path: item.path}">{{item.name}}</router-link>
			</li>
		</ul>
		<!-- 漂浮窗 -->
		<a id="study_box" class="po-ab" 
			href="https://www.xuexi.cn/" 
			@mouseenter="stop()"
			@mouseleave="start()">
			<img src="~@/assets/img/index_study2.png" width="150" alt="学习强国">
		</a>
		<!-- 内容页 -->
		<router-view></router-view>
		<!-- 底部 -->
		<div class="public_footer">
		    <div class="public_footer_header center-text">
		        <span>友情链接：</span>
		        <ul class="di-ib">
		            <li>
						<a href="http://cpc.people.com.cn/" target="_blank" title="中国共产党新闻网">中国共产党新闻网</a>
		            </li>
		            <li>
						<a href="http://www.zgg.org.cn/" target="_blank" title="紫光阁">紫光阁</a>
		            </li>
		            <li>
						<a href="http://www.zzdjw.org.cn/" target="_blank" title="中直党建网">中直党建网</a>
		            </li>
		            <li>
						<a href="http://www.hngwypx.gov.cn/" target="_blank" title="河南公务员网络学习">
							河南公务员网络学习
						</a>
		            </li>
		            <li>
						<a href="http://www.zhengzhou.gov.cn/" target="_blank" title="郑州市人民政府">郑州市人民政府</a>
		            </li>
		            <li>
						<a href="https://www.henandaily.cn/" target="_blank" title="河南日报">河南日报</a>
					</li>
		        </ul>
		    </div>
		    <ul class="public_footer_content">
		        <li>
		            <span>中共郑州市公安局交通警察支队委员会</span>
		        </li>
		    </ul>
		</div>
  </div>
</template>

<script>
	import '../assets/css/common.css'

	export default {
		data() {
			return {
				isVisibale:false,
				user:'',
				navList:[
					{name:'首页',path:'/index'},
					{name:'新闻中心',path:'/news'},
					{name:'专题专栏',path:'/seminar'},
					{name:'学习中心',path:'/studyCenter'},
					{name:'数据总览',path:'/dataOverview'},
					{name:'党员风采',path:'/partyMien'},
					{name:'会议中心',path:'/meetingCenter'}
				],
				current:null,   //当前高亮的左侧导航下标
				timer:null,
				maxL:null,
				maxT:null,
				speedX:10,
				speedY:8
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init(){
				this.user = sessionStorage.getItem('userName');
				let study_box = document.getElementById('study_box');
				//水平方向运动最大值
				this.maxL = document.documentElement.clientWidth - study_box.offsetWidth;
				this.maxT = document.documentElement.clientHeight - study_box.offsetHeight;
				this.autoMove(); 
			},
			addClassHandle(index){
				this.current = index
			},
			stop () {
				clearInterval(this.timer);
			},
			start () {
				this.autoMove();
			},
			autoMove(){
				let study_box = document.getElementById('study_box');
				this.timer = setInterval(() => {
					let nextX = study_box.offsetLeft + this.speedX;
					let nextY = study_box.offsetTop + this.speedY;
					 //左侧边界
					 if(nextX <= 0) {
						nextX = 0;
						this.speedX *= -1;
					}
	 
					 //上侧边界
					 if(nextY <= 0) {
						nextY = 0;
						this.speedY *= -1;
					}
	 
					//右侧边界
					if(nextX >= this.maxL) {
						nextX = this.maxL;
						this.speedX *= -1;
					}
	 
					 //底侧边界
					 if(nextY >= this.maxT) {
						nextY = this.maxT;
						this.speedY *= -1;
					}
					study_box.style.left = nextX + 'px';
					study_box.style.top = nextY + 'px';				
				},100);
			}
		}
	}
</script>

<style scoped>
.public_background{
    font-size: 16px;
    overflow: auto;
    background: url("../assets/img/index_backgroung.png") no-repeat left top;
    /* background-size: 100%; */
    background-color: #f8f4eb;
	height: 100%;
}
.public_title{
    width: 1200px;
    margin: 15px auto;
	text-align: left;
}
.user{
	position: relative;
	top: -16px;
}
/* 悬浮窗 */
#study_box{
	z-index: 100;
}
/* 悬浮窗结束 */
.public_header_nav_horizontal{
    box-sizing: border-box;
    display: table;
    width: 1200px;
    height: 56px;
    line-height: 56px;
    /* padding: 0 10px; */
    margin: 0 auto;
    border-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: #cf0000;
    color: #fff;
	font-size: 16px;
}
.public_header_nav_horizontal li a{
    display: block;
    /*width: 100%;*/
    color: #fff;
}
.public_header_nav_horizontal li{
    display: table-cell;
    table-layout: fixed;
    position: relative;
    /*width: calc( (100% - 12px) / 7 );*/
    width: 170px;
    border-right: solid 1px #ebebeb;
    text-align: center;
    cursor: pointer;
    _zoom:1;
}
.public_header_nav_horizontal li:last-child{
    border-right: none;
    font-size: 14px;
}
.public_header_nav_horizontal li:hover,.public_header_nav_horizontal li.active{
    background: #fafafa;
}
.public_header_nav_horizontal li:hover a,.public_header_nav_horizontal li.active a{
    color: #d10000;
}
.public_header_active .public_header_nav_triangle{
    position: absolute;
    bottom: 0;
    left: 47%;
    border-style: solid;
    border-color: transparent transparent #d10000 transparent;
    border-width: 0 6px 6px 6px;
}
.public_header_nav_horizontal img{
    padding-right: 4px;
}
/* 底部 */
.public_footer{
    /*height: 224px;*/
    border-top: solid 4px #c20c0c;
    background:url("../assets/img/index_footer.png") no-repeat top 95% right 18% ;
}
.public_footer .public_footer_header{
    height: 44px;
    vertical-align: middle;
    background: #cf0000;
    color: #fff;
}
.public_footer .public_footer_header > span{
    font-family: "PingFang SC Bold";
    line-height: 44px;
}
.public_footer .public_footer_header li{
    display: inline-block;
    border-right: solid 1px #fff;
    padding: 0 26px;
}
.public_footer .public_footer_header li a{
    font-family: "PingFang SC Medium";
    color: #ccc;
}
.public_footer_content{
    box-sizing: border-box;
    padding: 36px 0 44px 0 ;
}
.public_footer .public_footer_content li{
    text-align: center;
    font-size: 14px;
    line-height: 28px;
    color: #666;
}
.public_footer .public_footer_content li span:nth-child(1){
    padding: 0 6px;
}
.public_footer .public_footer_content li:nth-last-child(1) span{
    border: none;
}
</style>